/* reset */



table{border-collapse:collapse;border-spacing:0}

textarea{resize:none}



/* color */



/* clearfix */

.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}

*html .clearfix{ zoom:1;}





.preview{width:400px; height:315px; /*margin:50px 0px 0px 150px;*/ position:relative; float:left; }

/* smallImg */

.smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left; display:none; }

.scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }

.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(../images/d_08.png) no-repeat;}

.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(../images/d_09.png) no-repeat; margin-left:375px; margin-top:-50px;}



#imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}

#imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}

#imageMenu li img{width:50px; height:50px;cursor:pointer;}

#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}

/* bigImg */

.bigImg{position:relative; float:left; width:400px; height:300px; overflow:hidden;}

.bigImg #midimg{width:400px; height:300px;}

.bigImg #winSelector{width:235px; height:181px;}

#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}

/* bigView */

#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}

#bigView img{position:absolute;}




/* entire container, keeps perspective */
.flip-container {
    perspective:1000;
    width: 950px;
    float: right;

}

/* flip the pane when hovered */
.flip-container .flipper .routerBox{
    /*transition-duration:1s;*/

}
.flip-container .flipper:hover .routerBox  {

    /*transform: rotateY(180deg);*/

}
.routerBox{
    width: 300px;
    height: 250px;
}


/* hide back of pane during swap */
.front, .back {
    width: 300px;
    height: 240px;
    position: absolute;
    backface-visibility: hidden;
    transition-duration:.5s;
}

.front {
    z-index: 2;
   
}
.flipper:hover .back {
    z-index: 9999;
    background-color: black;
    opacity: 0.5;


}
/*.flip-container .flipper:hover .front{*/
    /*animation: roter .6s ease forwards;*/

/*}*/
/*.flip-container .flipper:hover .back{*/
    /*animation: roterback .6s ease forwards;*/

/*}*/
/*@keyframes roter{*/
    /*0%{ transform: rotateY(0deg); }*/
    /*50%{ transform: rotateY(90deg); z-index:1; }*/
    /*100%{ transform: rotateY(180deg); z-index:1; }*/
/*}*/

/*@keyframes roterback{*/
    /*0%{ transform: rotateY(-180deg); }*/
    /*50%{ transform: rotateY(-90deg);  z-index:3; }*/
    /*100%{ transform: rotateY(0deg); z-index:3; }*/
/*}*/
.flipper {

    width: 300px;
    padding: 4px;
    border: 1px solid #ccc;
    display: inline-block;
    text-align: center;
    height: 240px;
    /*transition: 0.6s;*/
    /*transform-style: preserve-3d;*/
    position: relative;
    margin-top: 15px;
}

.back p{
    height: 58px;
    line-height: 180px;
    color: #fff;
    font-size: 20px
}
.fuwu{
    position: relative;
    width: 1200px;
    margin: 0 auto;
    height: 400px;
	
    background: url("../images/wu.jpg") no-repeat center bottom; }

.lo{
    width: 33px;
    height: 33px;
    line-height: 33px;
    border-radius:50% ;
    background-color: #333333;
   display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 18px;
}

.fuwu .lo{
    position: absolute;
    left: 82px;
    top: 350px;
    /*border: 1px solid #333333;*/
}
.rl{
    display: inline-block;
    /*background-color: black;*/
    position: relative;
    width: 196px;
    height: 400px;
}
/*.l1{*/
    /*background-color: #BC0203;*/
/*}*/
.rl:hover .lo{
    background-color: #026222 ;
}